<template>
  <div class="voice-selector">
    <div class="voice-selector-trigger" @click="toggleDropdown">
      <span class="current-voice">
        <span class="voice-icon">🎵</span>
        <span class="voice-name">{{ currentVoiceName }}</span>
        <span class="voice-gender">{{ currentVoiceGender }}</span>
      </span>
      <span class="dropdown-arrow" :class="{ 'open': isOpen }">▼</span>
    </div>
    
    <div class="voice-dropdown" v-if="isOpen" @click.stop>
      <div class="voice-dropdown-header">
        <h4>选择音色</h4>
        <button class="close-btn" @click="closeDropdown">×</button>
      </div>
      
      <div class="voice-list">
        <div 
          v-for="voice in voices" 
          :key="voice.id"
          class="voice-item"
          :class="{ 'active': voice.id === currentVoice }"
          @click="selectVoice(voice.id)"
        >
          <div class="voice-info">
            <span class="voice-name">{{ voice.name }}</span>
            <span class="voice-gender" :class="voice.gender">{{ voice.gender }}</span>
          </div>
          <div class="voice-description">{{ voice.description }}</div>
          <div class="voice-preview" @click.stop="previewVoice(voice.id)">
            <span class="preview-icon">🔊</span>
            <span class="preview-text">试听</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import ttsService from '@/services/TTSService.js'

const props = defineProps({
  modelValue: {
    type: String,
    default: 'xiaoyan'
  }
})

const emit = defineEmits(['update:modelValue', 'voice-changed'])

const isOpen = ref(false)
const voices = ref([])
const currentVoice = ref(props.modelValue)

// 当前音色信息
const currentVoiceInfo = computed(() => {
  return voices.value.find(v => v.id === currentVoice.value) || voices.value[0]
})

const currentVoiceName = computed(() => {
  return currentVoiceInfo.value?.name || '小燕'
})

const currentVoiceGender = computed(() => {
  return currentVoiceInfo.value?.gender || '女'
})

// 切换下拉菜单
const toggleDropdown = () => {
  isOpen.value = !isOpen.value
}

// 关闭下拉菜单
const closeDropdown = () => {
  isOpen.value = false
}

// 选择音色
const selectVoice = (voiceId) => {
  currentVoice.value = voiceId
  console.log('🎵 VoiceSelector 选择音色:', voiceId)
  ttsService.setVoice(voiceId)
  emit('update:modelValue', voiceId)
  emit('voice-changed', voiceId)
  closeDropdown()
}

// 试听音色
const previewVoice = async (voiceId) => {
  try {
    const previewText = '你好，这是音色试听。'
    await ttsService.generateAudio(previewText, `preview_${voiceId}`, voiceId)
  } catch (error) {
    console.error('音色试听失败:', error)
  }
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  if (!event.target.closest('.voice-selector')) {
    closeDropdown()
  }
}

// 加载音色列表
const loadVoices = async () => {
  try {
    await ttsService.loadVoices()
    voices.value = ttsService.getVoices()
  } catch (error) {
    console.error('加载音色列表失败:', error)
  }
}

onMounted(() => {
  loadVoices()
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
@import './index.css';
</style>
